<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mbooks</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><!-- Global JS -->
<script type="text/javascript" src="js/jquery-jtemplates.js"></script>
<script type="text/javascript" src="js/jquery.li-scroller.1.0.full.js"></script><!-- News Scroller JS -->
<script type="text/javascript" src="js/jquery.updnWatermark.js"></script><!-- Text Field Watermark JS -->
<script type="text/javascript" src="js/date.format.js"></script>
<script type="text/javascript" language="javascript" >

var memberInfoData = null;
var vsetting;
var vlistedbooks;
var vorderinfo;

$(document).ready(function() {
	
	vorderinfo = {
			id:0,
			orderNo:"",
			customerId:0,
			customerName:"Guest",
			status:0,
			billing_add:"",
			shipping_add:"",
			post_code:"",
			email:"",
			shipping_date:"",
			subtotal:0,
			gst:0,
			servicecharge:1,
			vtotal:0,
			items:[],
			additem: function(id, itemId,itemName, units,actual_price){
				var newitem = {id:id,
					itemId:itemId,
					itemName:itemName,
					units:units,
					actual_price:actual_price
				};
				this.items.push(newitem);
			}
	};
	
	loadSetting();
	//loadContent("");
	
});


function loadSetting() {
	//retrieve setting data
	//$.post(url, param,callback);
	$.getJSON('http://localhost:8080/mbooks/resource/setting', function(data) {
		//alert("test something");		
		vsetting = data;
		var item = $('#menuitem');					
		item.empty();	
		item.setTemplateURL('menuitem.html');	
		item.processTemplate(data);	
		
		$('a[name^="course"]').click(function() {
			var courseId=$(this).attr('value');
			loadItems(courseId);
			return false;
		});
	});	
}


function loadItems(category) {
	
	
	$('#itemdetail').hide();
	$('#itemlist').show();
	
	//retrieve setting data
	$.getJSON('http://localhost:8080/mbooks/resource/item/items', function(data) {
		//alert("test something");		
		var item = $('#itemlist');					
		item.empty();	
		item.setTemplateURL('items.html');
		for(var i=0; i<data.uiMenuItems.length; i++){
			if(data.uiMenuItems[i].key =="TextBook"){
				vlistedbooks = data.uiMenuItems[i].value;
				item.processTemplate(data.uiMenuItems[i]);	
			}
		}
		
		$('a[name^="book"]').click(function() {
			var itemId=$(this).attr('value');
			loadItemDetail(itemId);
			return false;
		});
		
		$('a[name^="addbook"]').click(function() {
			var itemId=$(this).attr('value');
			var itemName=$(this).attr('itemName');
			var price=$(this).attr('price');
			
			vorderinfo.additem(0,itemId,itemName,1,price);
			loadOrderInfor();
			
			return false;
		});
	});	
}


function loadItemDetail(itemid) {
	
	$('#itemlist').hide();
	$('#itemdetail').show();
	
	var item = $('#itemdetail');					
	item.empty();	
	item.setTemplateURL('itemdetail.html');
	for(var i=0; i<vlistedbooks.length; i++){
		if(vlistedbooks[i].id == itemid){
			item.processTemplate(vlistedbooks[i]);	
		}
	}
	
	$('a[name^="course"]').click(function() {
		var courseId=$(this).attr('value');
		//showRestaurants(courseId);
		return false;
	});
}


function loadOrderInfor() {
	//retrieve setting data
	//$.post(url, param,callback);
	alert("test loadOrderInfor" +vorderinfo.customerName);	
	
	var item = $('#orderinfo');					
	item.empty();	
	item.setTemplateURL('parts/orderinfo.html');	
	item.processTemplate(vorderinfo);	
	
	$('a[name^="course"]').click(function() {
		var courseId=$(this).attr('value');
		//loadItems(courseId);
		return false;
	});
	 
	$('#orderinfo').show();
	
}

function initialOrderInfor(){
	
	if(null == vorderinfo){
		vorderinfo = {
			id:0,
			orderNo:"",
			customerId:0,
			customerName:"Guest",
			status:0,
			billing_add:"",
			shipping_add:"",
			post_code:"",
			email:"",
			shipping_date:"",
			subtotal:0,
			gst:0,
			servicecharge:1,
			vtotal:0,
			items:[],
			additem: function(id, itemId,itemName, units,actual_price){
				var newitem = {id:id,
					itemId:itemId,
					itemName:itemName,
					units:units,
					actual_price:actual_price
				};
				this.items.push(newitem);
			}
		};
	}
	
}


function showMessage(vname){
	alert("vname::"+vname);
	
	/*                        
	var arrayValues     = {};
	var serializeValues = {};
	var fields = $('#betForm').serializeArray();

	$.each(fields, function(i, f){
		if(typeof arrayValues[f.name] == 'undefined'){
			arrayValues[f.name] = [];
		}     
		arrayValues[f.name].push(f.value);
		serializeValues[f.name] = arrayValues[f.name].join(",");                        
	});
	
	var betResult = $('#betResult');
	var resultButtons = $('#resultButtons');
	
	$.ajax({
		type: 'POST',
		url: '../resource/bp/placebet',
		data: serializeValues,
		dataType: 'json',
		*/
}


</script>
</head>
<body>

<div id="main">

<!-- start header -->
<div id="header">
  	<table width="700" border="0" cellspacing="0" cellpadding="3">
	  <tr>
	    <td width="109"><img src="images/logo.png" width="109" height="67"></td>
	    <td width="45" valign="bottom">Online</td>
	    <td width="400" valign="bottom">Buy Yourself from the Internet</td>
      </tr>
    </table>

    <div class="underlinemenu">
        <ul>
            <li><a href="http://localhost:8080/mbooks/">Home</a></li>
            <li><a href="#">Books</a></li>
            <li><a href="#">Member</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
    <div id="searchbar">search here <input type="text" width="300" />
    <img src="images/search.png" onClick="alert();"/>
    </div>
</div>
<!-- end header -->
<!-- start page -->
<div id="wrapper">
<div id="page">
	<!-- start content -->
	<div id="content">
        <div id="itemlist"></div>
        <div id="itemdetail"></div>
    </div>
	<!-- end content -->
    <!-- start sidebar -->
    <div id="sidebar">
        <div id="menuitem"></div>
        <div id="orderinfo"></div>
        <div id="highlights"></div>
    </div>
    <!-- end sidebar -->

</div>
	<div style="clear:both">&nbsp;</div>
</div>
<!-- end page -->
<div id="footer">
	<p>&copy;&nbsp;2011 All Rights Reserved &nbsp;&bull;&nbsp; Design by &nbsp;&nbsp; Aaron Projects Team</p>
</div>
</div>
</body>
</html>
